<template>
  <el-card shadow="hover" class="card">
    <div class="card-title">{{ title }}</div>
    <div class="card-total">{{ totalNum }}</div>
    <div class="card-content">
      <!-- 默认插槽 -->
      <slot />
    </div>
    <div class="card-line"></div>
    <div class="card-footer">
      <slot name="footer" />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { computed } from "vue";

defineOptions({
  name: "Card",
});

const props = defineProps<{
  title: string;
  total: string | number;
}>();

// 千分位算法
const totalNum = computed(() => {
  return String(props.total).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
</script>

<style scoped lang="scss">
.card {
  margin-bottom: 10px;
}
.card-title {
  font-size: 12px;
  color: #999;
}
.card-total {
  font-size: 25px;
  font-weight: 500;
  margin: 5px 0;
}

.card-content {
  height: 50px;
}

.card-line {
  height: 2px;
  background-color: #eee;
  margin: 10px 0;
}

.card-footer {
  font-size: 12px;
  height: 16px;
  overflow: hidden;
}
</style>
